<template>

	<view class="custom-circle">
		<view class="title">
			重复周期
		</view>
		<view class="circle-select">
			<input type="number" auto-focus="" v-model="value" />
			<uni-data-select v-model="unit" :localdata="range" :clear="false" @change="uniChange"></uni-data-select>
		</view>
		<view class="weekdays" v-if="unit==='week'">
			<view :class="{
				'weekday-item':true,
				'is-active':weekday.active
			}" v-for="weekday in weekDays" :key="weekday.value" @click="()=>changeActive(weekday)">
				{{weekday.label}}
			</view>
		</view>
		<view class="operates">
			<view class="cancel" @tap="$emit('close')">
				取消
			</view>
			<view class="finish" @tap="finish">
				完成
			</view>
		</view>

	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import { updateTimeFormat, getNextWorkingDay, nextDay, nextCustomWeekDay, nextCircleDate, weekMap } from '@/utils/taskList'

	export default {
		data() {
			return {
				value: "1",
				unit: "day",
				range: [
					{ value: "day", text: "天" },
					{ value: "week", text: "周" },
					{ value: "month", text: "月" },
					{ value: "year", text: "年" },
				],

				weekDays: [
					{ value: "0", label: '周日', active: false },
					{ value: "1", label: '周一', active: false },
					{ value: "2", label: '周二', active: false },
					{ value: "3", label: '周三', active: false },
					{ value: "4", label: '周四', active: false },
					{ value: "5", label: '周五', active: false },
					{ value: "6", label: '周六', active: false },
				],

			}
		},
		computed: {
			selectWeeks() {
				return this.weekDays.filter(item => item.active).map(i => i.value).join(";")
			}
		},
		methods: {
			uniChange(value) {
				if (value === 'week') {
					this.weekDays.forEach(item => {
						item.active = false
					})
				}
			},
			changeActive(item) {
				item.active = !item.active
			},
			finish() {
				const params = { repeatCircle: this.value, repeatUnit: this.unit }
				if (this.unit === 'week') {
					if (!this.selectWeeks) {
						uni.showLoading({
							title: '请至少选择一天'
						});
						setTimeout(function() {
							uni.hideLoading();
						}, 2000);
						return

					} else {
						params.repeatExtFields = this.selectWeeks
						params.deadTime = nextCustomWeekDay(dayjs(), this.selectWeeks)

					}
				} else {
					params.deadTime = nextCircleDate(dayjs(), this.unit, Number(this.value))

				}

				this.$emit('confirm', params)

			}
		}
	}
</script>

<style lang="scss" scoped>
	.custom-circle {
		width: 80vw;
		background-color: #fff;
		padding: 24upx;

		.circle-select {
			display: flex;
			align-items: center;
			margin-top: 24upx;
			padding-left: 24upx;

			/deep/ input {
				width: 60upx;
				padding: 0 24upx;
				border-bottom: 6upx solid #2979ff;
				box-sizing: border-box;
			}

			/deep/.uni-select {
				width: 120upx;
				border: none;
			}
		}

		.weekdays {
			display: flex;
			flex-wrap: wrap;

			.weekday-item {
				width: 80upx;
				height: 80upx;
				border: 2upx solid #333;
				color: #333;
				border-radius: 50%;
				margin: 24upx;
				line-height: 80upx;
				text-align: center;
				font-size: 24upx;


				&.is-active {
					color: #fff;
					background-color: #2979ff;
					border-color: #2979ff;
				}
			}
		}

		.operates {
			width: 100%;
			display: flex;
			padding: 24upx;
			box-sizing: border-box;
			align-items: center;
			justify-content: flex-end;
			font-size: 24upx;

			.finish {
				margin-left: 24upx;
				color: #2979ff;
			}
		}
	}
</style>